<style>
    .imagelist>div {
        margin: 10px;
        position: relative;
    }

    .imagelist .delmultiimage {
        position: absolute;
        right: 0;
        top: -10px;
        cursor: pointer;
    }

    .imagelist img {
        border-radius: 6px;
        border: 1px solid #ccc;
        padding: 10px;
        width: 100px;
        height: 100px
    }

    .imagelist_<?php echo $name ?> img {
        cursor: move;
    }
</style>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="<?php echo $name ?>">
        <i class="layui-icon layui-icon-upload"></i> 多图片上传
    </button>

    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
        <div class="layui-upload-list" id="upload-demo-preview">
            <div class="rc-flex rc-flex-wrap imagelist imagelist_<?php echo $name ?>">

                <?php
                $vindx = 0;
                if (isset($value) && $values = is_json($value)) {
                    if (is_array($value) ||  $value = is_json($value)) {
                        foreach ($value as $key => $val) {
                ?>
                            <div>
                                <span class="layui-badge delmultiimage">删除</span>
                                <input type="hidden" value="<?php echo $val['path'] ?>" name="<?php echo $name ?>[<?php echo $vindx ?>][path]" />
                                <img src="<?php echo $val['path'] ?>" />
                                <input type="text" value="<?php echo $val['title'] ?>" name="<?php echo $name ?>[<?php echo $vindx ?>][title]" class="layui-input" style="margin-top:10px;width:122px" />
                            </div>
                <?php
                            $vindx++;
                        }
                    }
                }


                ?>




            </div>
        </div>
    </blockquote>
</div>
<script src="/static/admin/lib/Sortable/Sortable.min.js"></script>
<script>
    layui.use(function() {
        var upload = layui.upload;
        var $ = layui.jquery;



        // 解决Sortable.create在火狐浏览器上会打开新窗口
        document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
        }


        var sortable = new Sortable(document.querySelector('.imagelist_<?php echo $name ?>'), {
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            dragClass: "sortable-drag", // 正在被拖拽中的css类名
            handle: 'img', // handle's class
            // 列表单元拖放结束后的回调函数
            onEnd: function( /**Event*/ evt) {
                //可以写自己业务，其他的方法和参数参考文档：http://www.sortablejs.com/options.html 
                console.log(evt);
            },
        });





        // 多图片上传
        var <?php echo $name ?>_deep = <?php echo $vindx; ?>;
        upload.render({
            elem: '#<?php echo $name ?>',
            url: '/element/multiimage/Index/upload?token=<?php echo element_safe_token('multiimage') ?>',
            multiple: true,
            field: '<?php echo $name ?>_file',
            before: function(obj) {


            },

            done: function(res) {
                if (res.code == 0) {
                    $('.imagelist').append(' <div> \
                         <span class="layui-badge delmultiimage">删除</span>\
                         <input type="hidden" value="' + res.data.path + '" name="<?php echo $name ?>[' + <?php echo $name ?>_deep + '][path]"/> \
                         <img src="' + res.data.path + '" /> \
                         <input type="text" value="' + res.data.orgname + '" name="<?php echo $name ?>[' + <?php echo $name ?>_deep + '][title]" class="layui-input" style="margin-top:10px;width:122px" /> \
                    </div>');
                    <?php echo $name ?>_deep++;
                } else {
                    toastr_error(res.message);
                }
            }
        });
    });

    $('body').on('click', '.delmultiimage', function() {
        $(this).parent().remove();
    });
</script>